<template>
	<view class="confirm-write-offs">
		<view class="user flex-align">
			<view style="margin-right: 20rpx;">
				<!-- <van-image width="80rpx" height="80rpx" round /> -->
				<image :src="uInfolist.head_pic" style="width: 80rpx;height: 80rpx;border-radius: 50% 50%;" mode=""></image>
			</view>
			<view>
				<view class="user-name">{{uInfolist.username}}</view>
				<view class="tel">{{uInfolist.phone}}</view>
			</view>
		</view>

		<view class="section_1">
			<view class="section_2 flex-space-between">
				<view class="flex-align">
					<!-- <view style="margin-right: 20rpx;">
						<van-image width="65rpx" height="65rpx" round />
					</view> -->
					<view>
						<view class="text_4">{{codelist.code_name}}</view>
						<view class="text_5" v-if="codelist.code_less">剩余{{codelist.code_less}}</view>
					</view>
				</view>
				<text class="text_6">{{hand}}</text>
			</view>

			<view class="section_3">
				<view class="text_7">核销次数</view>

				<view class="group_9 flex-center">
					<!-- <van-image width="52rpx" height="52rpx"
						src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391914569684881362.png" />
					<view class="number">2</view>
					<van-image width="52rpx" height="52rpx"
						src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391914569685541537.png" /> -->
					<u-number-box :min="1" v-model="value" @change="valChange" :disabledInput="true" :disablePlus="true"></u-number-box>
				</view>

				<view class="text_7">卡号</view>

				<scroll-view class="list" scroll-y>
					<view class="item flex-align">
						<input type="text" placeholder="卡号" class="flex-grow-1" v-model="hand" disabled="disabled"/>
						<!-- 删除 -->
						<!-- <van-image width="25rpx" height="25rpx" @click="del_shoupai" class="del_na"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391247793773483581.png" /> -->
					</view>
					<!-- <view class="item flex-align">
						<input type="text" placeholder="请输入手牌" class="flex-grow-1" />
						<van-image width="21rpx" height="21rpx"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391247793773483581.png" />
					</view> -->
				</scroll-view>
			</view>

			<view class="section_8">
				<textarea placeholder="我手机落你们游泳馆里了(这里默认展示上期核销时填写的备注信息,点击可进行本次核销备注填写)"></textarea>
			</view>
		</view>

		<view class="btn" v-if='btnif'>
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)"
				@click="onClick">立即核销</van-button>
		</view>
		<view class="btn" v-if='!btnif'>
			<van-button round block color="linear-gradient(0deg, rgb(198, 198, 198) 0%, rgb(156, 156, 156) 100%)">立即核销</van-button>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				value: 0,
				hand: '', //手牌码
				op:'',
				codelist:[],
				uInfolist:'',
				btnif:true
			}
		},
		onLoad(options) {
			this.hand = options.val
			this.op = options.op
			this.info()
		},
		onShow() {},
		methods: {
			async info() {
				let that = this;
				let data = {
					code_no: this.hand,
					op: this.op,
				};
				let result = await venues.info(data);
				if (result.code == 1) {
					this.codelist = result.data.list[0]
					this.uInfolist = result.data.uInfo
				} else {
					this.btnif = false
				}
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			async onClick() {
				let that = this;
				let data = {
					code_no:this.hand
				};
				let result = await venues.comsume_cons(data);
				if (result.code == 1) {
					uni.navigateBack();
				}else{
					uni.showToast({
						title: result.info,
						icon:'exception',
						duration:850
					});

				}
			},
			del_shoupai(){
				this.hand = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-write-offs {
		min-height: 100vh;
		background-color: rgb(243, 243, 243);
		padding-bottom: 130rpx;

		.user {
			padding: 30rpx;
			background-color: #fff;

			.user-name {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
			}

			.tel {
				margin-top: 20rpx;
				color: rgb(51, 51, 51);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 17rpx;
			}
		}

		.section_1 {
			padding: 20rpx;
		}

		.section_2 {
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 9rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;

			.text_4 {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
			}

			.text_5 {
				margin-top: 24rpx;
				font-size: 26rpx;
				font-weight: 500;
				line-height: 24rpx;
			}

			.text_6 {
				font-size: 30rpx;
				font-weight: 700;
			}
		}

		.section_3 {
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 9rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			margin: 20rpx 0;

			.text_7 {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
			}

			.group_9 {
				margin: 40rpx 0;
				height: 52rpx;

				.number {
					margin: 0 40rpx;
					height: 100%;
					font-weight: bold;
				}
			}

			.list {
				height: 100rpx;
				margin-top: 37rpx;

				.item {
					background-color: rgb(243, 243, 243);
					border-radius: 100px;
					font-size: 28rpx;
					padding: 20rpx 35rpx;
					
					.del_na{
						position: absolute;
						z-index: 999;
						right: 30rpx;
					}

					&+.item {
						margin-top: 30rpx;
					}
				}
			}
		}

		.section_8 {
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 9rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;

			textarea {
				width: 100%;
				font-size: 28rpx;
				height: 250rpx;
			}
		}

		.btn {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			padding: 0 40rpx;
		}
	}
</style>